<template>
<div>
     <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片主体 -->
    <el-card class="box-card">
        <div class="block">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>公告</span>
                </div>
                <div class="text item" style="text-indent:2em">
                    {{notice.content}}
                </div>
            </el-card>
            <div class="topTab" id="topTab">
                <div class="topItem">
                    <div class="leftItem">
                        <div class="icon el-icon-user"></div>
                        <span class="leftNum">{{list[1]}}</span>
                    </div>
                    <div class="rightLabel">用户总数量</div>
                </div>
                <div class="topItem">
                    <div class="leftItem">
                        <div
                            class="icon el-icon-s-promotion"
                            style="background: linear-gradient(to bottom right,#FF868D,#FF6068);"
                        ></div>
                        <span class="leftNum" style="color:#FF6068">{{list[1]}}</span>
                    </div>
                    <div class="rightLabel">活跃人数</div>
                </div>
                <div class="topItem">
                    <div class="leftItem">
                        <div
                            class="icon el-icon-chat-round"
                            style="background: linear-gradient(to bottom right,#89B1FE,#5A93FA);"
                        ></div>
                        <span class="leftNum" style="color:#5A93FA">{{list[0]}}</span>
                    </div>
                    <div class="rightLabel">公告发布量</div>
                </div>
            </div>

            <div class="bottomTab">
                <div class="bottomItem">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>近日访问用户量</span>
                        </div>
                        <div class="text item">
                            <index-line></index-line>
                        </div>
                    </el-card>

                </div>
                <div class="bottomItem">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>系统信息</span>
                        </div>
                        <div class="text item">
                            <IndexPie></IndexPie>
                        </div>
                    </el-card>

                </div>
            </div>


        </div>
    </el-card>
</div>

</template>
<script>
    import noticeApi from "@/api/notice"
    import IndexPie from "./indexpie.vue"
    import IndexLine from "./indexline.vue"
    export default {
        data() {
            return {
                list:[],
                notice:{}
            }
        },
        components: {
            IndexPie,
            IndexLine
        },
        created() {
            this.getCount()
            this.getNotice()
        },
        methods: {
            getCount() {
                noticeApi.getCount().then(res => {
                    this.list = res.data.data
                })
            },
            getNotice() {
                noticeApi.getNotice().then(res => {
                    this.notice = res.data.data
                })
            }
        }
    }
</script>

<style scoped>
    .block{
        height: 700px;
        overflow: auto;
    }
    .topTab {
        width: 100%;
        height: 80px;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }
    .topItem {
        width: 28%;
        height: 80px;
        line-height: 80px;
        padding: 0 10px;
        background: #F5F5F5;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .leftItem {
        margin-left: 20px;
        display: flex;
        align-items: center;
    }

    .icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(to bottom right, #feda66, #fdc61f);
        color: #fff;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        font-size: 30px;
    }
    .leftNum {
        margin-left: 20px;
        color: #fdc61f;
        font-size: 30px;
    }

    .rightLabel {
        margin-right: 30px;
        font-size: 12px;
        color: #333;
    }
    .bottomTab {
        width: 100%;
        min-height: 300px;
        padding: 10px 0 0 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }
    .bottomItem{
        height:300px;
        width: 45%;
    }




</style>